<style>
    .vr_box {
        padding: 80px 57px;
    }
    .zfb_box {
        width: 100%;
    }
</style>
<template>
    <div v-show="key== 'weixin' ">
	  	<x-header style="background-color: rgb(43,165,187);" :left-options="{backText: '返回', showBack: true }">
            <span style=" color: rgb(221,221,221); font-size:14px; ">微信支付</span>
        </x-header>
        <div class="vr_box">
            <img style=" width: 300px; height: 300px; " :src="vrCode" />
        </div>
    </div>
    <div v-show="key== 'zhifubao' ">
        <x-header style="background-color: rgb(43,165,187);" :left-options="{backText: '返回', showBack: true }" :right-options="{showMore: true}" @on-click-more="clickMore">
            <span style=" color: rgb(221,221,221); font-size:14px; ">支付宝支付</span>
        </x-header>
        <div class="zfb_box">
            <img style="width:100%" :src="url" />
        </div>
    </div>
</template>
<script>
    import XHeader from 'vux/dist/components/x-header'

    export default {
    	components: {
    		XHeader
    	},
        ready (){
            console.log(this.$route.params)
        },
        data: function () {
        	return {
        		key: this.$route.params.key,
                url: 'src/img/button.png'
        	}
        },
        methods: {
            clickMore: function() {
                console.log("调用手机控件...");
            }
        }
    }
</script>